<div>
	<!-- widget content -->
	<div class="widget-body">

		<form action="" method="post" id="checkout-form" class="smart-form">
			<header>
				<h2>
					增加策略
					<button class="close" data-dismiss="modal">x</button>
				</h2>
			</header>
			<fieldset style="padding: 25px 14px 5px 20%;">
				<div id="dialog-alert"></div>
				<div id="crontabLabel"></div>
				<div class="row">
					<label class="label col col-2">备份类型</label>
					<section class="col col-6">
						<label class="select"> <select class="required " id="type"
							name="type">
								<option value="">请选择备份类型</option>
						</select>
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-2">保留天数</label>
					<section class="col col-6">
						<label class="select"> <select class="required "
							id="retention" name="retention">
								<option value="">请选择保留天数</option>
						</select>
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-2">备份周期</label>
					<section class="col col-6">
						<label class="select"> <select class="required "
							id="retention_type" name="retention_type">
						</select>
						</label>
					</section>
				</div>
				<div class="row" id="sel_day">
					<label class="label col col-2">日期</label>
					<section class="col col-6">
						<label class="select"> <select class="required " id="dom"
							name="dom">
						</select>
						</label>
					</section>
				</div>
				<div class="row" style="display: none;">
					<label class="label col col-2">月</label>
					<section class="col col-6">
						<label class="select"> <select class="required "
							id="month" name="month">
						</select>
						</label>
					</section>
				</div>
				<div class="row" id="sel_week">
					<label class="label col col-2">周</label>
					<section class="col col-6">
						<label class="select"> <select class="required " id="dow"
							name="dow">
						</select>
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-2">时</label>
					<section class="col col-2">
						<label class="select"> <select class="required " id="hour"
							name="hour">
						</select>
						</label>
					</section>
					<label class="label col col-2">分</label>
					<section class="col col-2">
						<label class="select"> <select class="required "
							id="minute" name="minute">
						</select>
						</label>
					</section>
				</div>
			</fieldset>
		</form>
	</div>
	<!-- end widget content -->

</div>
<div class="modal-footer">

	<button type="button" class="btn btn-default btn-sm"
		data-dismiss="modal">取消</button>
	<button type="submit" class="btn btn-primary btn-sm" id="submitbtn">
		保存</button>
</div>
<script>
    pageSetUp();
    
    $("#sel_day").hide();
	$("#sel_week").hide();
    
    var type, $type;
    var retention, $retention;
    var retention_type, $retention_type;
    var minute, $minute;
    var hour, $hour;
    var dom, $dom;
    var month, $month;
    var dow, $dow;
    var s = $("#jqgridBackupStrategy").jqGrid('getGridParam', 'selarrrow');
    var backup_storage_id = $("#jqgridBackupStrategy").jqGrid('getRowData',s).id;
    
    var pagefunction = function() {
    	
        var errorClass = 'invalid';
        var errorElement = 'em';
        var option ={
            errorClass: errorClass,
            errorElement:errorElement,
            highlight: function(element) {
                $(element).parent().removeClass('state-success').addClass("state-error");
                $(element).removeClass('valid');
            },
            unhighlight: function(element) {
                $(element).parent().removeClass("state-error").addClass('state-success');
                $(element).addClass('valid');
            },
            // Rules for form validation
            // Messages for form validation
            messages:{
            	type : {
                    required : '请选择备份类型'
                },
                retention : {
                    required : '请选择保留天数'
                }
            },
            errorPlacement : function(error, element) {
                if($(element).next("div").hasClass("tooltip")) {
                    $(element).attr("data-original-title", $(error).text()).tooltip("show");
                } else {
                    $(element).attr("title",
                            $(error).text()).tooltip("show");
                }
            },
            submitHandler:function(form){
            	//在这里生成需要提交的json数据
            	var data=$('#checkout-form').serializeArray();
            	var jsonData = {
            			type: data[0].value,
            			retention: parseInt(data[1].value),
            			cronExpression: $("#minute").val() + ' ' + $("#hour").val() + ' ' +$("#dom").val() + ' ' +$("#month").val() + ' ' + $("#dow").val(),
            			mark:""
            	};
            	//在这里调用ajax方法提交
            	sendPut("/upm_manager/v1.0/servs/"+getSession("serviceUpsqlId")+"/backup_strategys/"+backup_storage_id, postSuccess,DialogAlert,JSON.stringify(jsonData), null);
            }
        };
        $('#checkout-form').validate(option);
    };
    loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);

    $('#submitbtn').click(function() {
    	DialogAlertClear();
    	$('#checkout-form').submit();
    });
    function postSuccess(data){
    	//提交成功的方法
    	$("#s4remoteModal").modal('toggle');
    	sendGet("/upm_manager/v1.0/servs/"+getSession("serviceUpsqlId")+'/backup_strategys',reloadBackupStrategyGrid,ListAlert,null);
    }
    
    function fillForm(data){
			type = $type[0].selectize;
			type.clearOptions();
        	$.each(data, function(k, v){
        		type.addOption(v);
        		type.setValue(v.id);
        	});
	}
    
    $("#dom").change(function(){
		if($(this).val() != "*"){
			dow.setValue("*");
		}
	});
    
    $("#dow").change(function(){
    	if($(this).val() != "*"){
			dom.setValue("*");
		}
	});
    
    $("#retention_type").change(function(){
    	if($(this).val() == "1"){
    		$("#sel_day").hide();
    		$("#sel_week").hide();
		}else if($(this).val() == "2"){
			$("#sel_day").hide();
    		$("#sel_week").show();
		}else if($(this).val() == "3"){
			$("#sel_day").show();
    		$("#sel_week").hide();
		}
	});
    
    sendGet("/upm_manager/v1.0/servs/"+getSession("serviceUpsqlId")+"/backup_strategys/"+backup_storage_id,fillForm_data,DialogAlert,null);
    
    function fillForm_data(data){
    	
    	//备份类型
    	$type = $("#type").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'id'},
    		options: []
    	});
    	
    	sendGet("/upm_manager/v1.0/selections/backup_types",fillForm,DialogAlert,null);
    	
    	//备份周期类型
    	$retention_type = $("#retention_type").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'id'},
    		options: [{
        		id: "1",
        		text: "按天"
        	},{
        		id: "2",
        		text: "按周"
        	},{
        		id: "3",
        		text: "按月"
        	}]
    	});
    	retention_type = $retention_type[0].selectize;
    	
    	//保留天数
    	$retention = $("#retention").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'id'},
    		options: []
    	});
    	retention = $retention[0].selectize;
    	retention.clearOptions();
    	for(var i = 1; i <= 30; i++){
    		retention.addOption({
    			id: i,
    			text: i.toString()
    		});
    	}
    	
    	//分钟
    	$minute = $("#minute").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'id'},
    		options: []
    	});
    	minute = $minute[0].selectize;
    	minute.clearOptions();
    	for(var i = 0; i < 60; i++){
    		minute.addOption({
    			id: i,
    			text: i.toString()
    		});
    	}
    	
    	//小时
    	$hour = $("#hour").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'id'},
    		options: []
    	});
    	hour = $hour[0].selectize;
    	hour.clearOptions();
    	for(var i = 0; i < 24; i++){
    		hour.addOption({
    			id: i,
    			text: i.toString()
    		});
    	}
    	
    	//按月-------天数
    	$dom = $("#dom").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'id'},
    		options: []
    	});
    	dom = $dom[0].selectize;
    	dom.clearOptions();
    	dom.addOption({
			id: "*",
			text: "*"
		});
    	for(var i = 1; i <= 31; i++){
    		dom.addOption({
    			id: i,
    			text: i.toString()
    		});
    	}
    	
    	//月----------*
    	$month = $("#month").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'id'},
    		options: []
    	});
    	month = $month[0].selectize;
    	month.clearOptions();
    	month.addOption({
			id: "*",
			text: "*"
		});
    	for(var i = 1; i <= 12; i++){
    		month.addOption({
    			id: i,
    			text: i.toString()
    		});
    	}
    	month.setValue("*");
    	
    	//按周---------------星期
    	$dow = $("#dow").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'id'},
    		options: []
    	});
    	dow = $dow[0].selectize;
    	dow.clearOptions();
    	dow.addOption({
			id: "*",
			text: "*"
		});
    	for(var i = 1; i <= 7; i++){
    		dow.addOption({
    			id: i,
    			text: i.toString()
    		});
    	}
    	
    	
    	
    	$("#type").val(data.data.typeText);
    	retention.setValue(data.data.retention);
    	
    	var strs= new Array();
    	var data_str = data.data.cronExpression;
    	strs=data_str.split(" ");
    	hour.setValue(strs[0]);
    	minute.setValue(strs[1]);
    	
    	if(strs[2] != '*' && strs[4] == '*'){
    		$("#sel_day").show();
    		$("#sel_week").hide();
    		retention_type.setValue("3");
    		dom.setValue(strs[2]);
    	}else 
    	if(strs[4] != '*' && strs[2] == '*'){
    		$("#sel_day").hide();
    		$("#sel_week").show();
    		retention_type.setValue("2");
    		dow.setValue(strs[4]);
    	}else 
    	if(strs[4] == '*' && strs[2] == '*'){
    		$("#sel_day").hide();
    		$("#sel_week").hide();
    		retention_type.setValue("1");
    	}
    }
</script>